<template>
  <div>
    <!-- 歌单描述 -->
    <div class='playlist-desc' v-if='textData.length'>
      <div v-if='textData.join().length < maxLen'>
        <span v-for='item in textData' :key='item.value' v-html='filterDesc(item)'></span>
      </div>
      <div v-else>
        <div v-if='showBtn'>
            <span v-for='item in textData' :key='item.value' v-html='filterDesc(item)'></span>
        </div>
        <div v-else>
            <span v-html='sliceStr(textData)'></span>
        </div>
        <div class='fr' @click='showBtn = !showBtn'>
          <a href='javascript:;' class='unfold-btn cursor-pointer'>{{ btnText }}</a>
          <span :class=btnClass></span>
        </div>
      </div>
    </div>
    <!-- 专辑描述 -->
    <div class='album-desc fs12' v-if='albumTextData.length'>
      <div v-if='albumTextData.join().length < maxLen'>
        <p v-for='item in albumTextData' :key='item.value'>{{ item }}</p>
      </div>
      <div v-else>
        <div v-if='showBtn'>
          <p class='line-h30 text-indent2' v-for='item in albumTextData' :key='item.value'>{{ item }}</p>
        </div>
        <div v-else>
          <p class='line-h30 text-indent2' v-for='data in sliceAlbumStr(albumTextData)' :key='data.value'>{{ data }}</p>
        </div>
        <div class='fr' @click='showBtn = !showBtn'>
          <a href='javascript:;' class='unfold-btn cursor-pointer'>{{ btnText }}</a>
          <span :class=btnClass></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'unfold',
  props: ['text', 'albumText'],
  data() {
    return {
      textData: [],
      albumTextData: '',
      maxLen: 80,
      btnText: '展开',
      btnClass: ['el-icon-arrow-down', 'cursor-pointer'],
      showBtn: false
    }
  },
  methods: {
    filterDesc(data) {
      if(data == "") {
        data = '<br>'
      }
      return data
    },
    sliceStr(str) {
      let newStr = str.map(item => {
        if(item == "") {
          return item = "<br>"
        } else {
          return item
        }
      })
      return newStr.join().substring(0, this.maxLen) + '...'
    },
    sliceAlbumStr(str) {
      let string = str.join('/').slice(0, 200) + '...'
      string = string.replace(/\//g, '<br>')
      return string.split('<br>')
    },
    toogleClass(val) {
        if (val) {
          this.btnClass = ['el-icon-arrow-up', 'cursor-pointer']
          this.btnText = '收起'
        } else {
          this.btnClass = ['el-icon-arrow-down', 'cursor-pointer']
          this.btnText = '展开'
        }
    }
  },
  watch: {
    showBtn(val) {
        this.toogleClass(val)
        return val
    },
    text() {
      this.textData = this.text
    },
    albumText() {
      this.albumTextData = this.albumText
    }
  }
}
</script>

<style scoped lang='less'>
.unfold-btn {
  color: #4771dc;
}
.line-h30 {
  line-height: 30px;
}
.text-indent2 {
  text-indent: 2em;
}
</style>